<template>
	<view>
		<view>
		    <view class="good-item" v-for="item in goodList">
		      <!-- 左侧盒子 -->
		      <view class="good-item-left">
		        <!--  没有得话就用默认图片  -->
		        <image :src="item.url" mode=""></image>
		      </view>
		      <!-- 右侧盒子 -->
		      <view class="good-item-right">
		        <view class="good-item-name">{{item.name}}</view>
		        <view class="good-item-info">
		          <view class="good-price">￥0</view>
				  <view>
					  <uni-tag v-if="type == 1" text="已中奖" type="error" />
					  <view v-if="type == 1 ">
						  <button type="primary" @click="storeAddr(item.lotteryId)">添加发货地址</button>
					  </view>
				  </view>
		        </view>
		      </view>
		    </view>
		  </view>
		  <view>
			  <uni-popup ref="popup" type="center" background-color="#fff">
			      <view>
					  收货地址： {{areaName}}
					  <button type="primary" @click="Addr()">请选择收获地址</button>
				  </view>
				  <view>
				  	  备注：<textarea  placeholder="请输入商品需要的详细信息,如大小,尺寸等" v-model="content" maxlength="150"/>
				  </view>
				  <view>
					  <button type="primary" @click="cancel">取消</button>
					  <button type="primary" @click="confirm">确认</button>
				  </view>
			  </uni-popup>
		  </view>
	</view>
</template>

<script>
import {getUserPrizeLogPageReq,storeUserPrizeAddress} from "../../service/base.js"
	export default {
		data() {
			return {
				type: null,
				goodList:[],
				isLastPage:false,
				pageNum: 1,
				content: null,
				areaId: null,
				areaName: null,
				lotteryId: null
			}
		},
		onShow() {
			var that = this
			uni.$once('areaData',function(data){
				 console.log(data)
				 data = JSON.parse(data)
				 that.areaId = data.id
				 that.areaName = data.areaName
			})	
		},
		onLoad(options) {
			this.type = options.type
			this.getUserPrizeLogPageReq()
		},
		onReachBottom() {
			if(this.isLastPage){
			  uni.showToast({
				title:"已经最后一页了",
				icon: 'none'
			  })	
			}else{
				this.pageNum ++ 
				this.getUserPrizeLogPageReq()
			}
		},
		methods:{
			getUserPrizeLogPageReq() {
				getUserPrizeLogPageReq({type:this.type,page_index:this.pageNum}).then(res =>{
					var list = res.data.list
					if(list){
						list.forEach(item =>{
							this.goodList.push(item)				  
						})
					}		
					
					this.isLastPage = res.data.isLastPage
				})
			},
			storeAddr(lotteryId) {
				 this.lotteryId = lotteryId
				 this.$refs.popup.open('center')
			},
			Addr() {
				 uni.navigateTo({
					url:"/pages/addrManage/index"
				 })
			},
			cancel() {
				this.areaId = null
				this.areaName = null
			},
			confirm() {
				if(!this.areaId){
					uni.showToast({
					 title: "请选择收获地址",
					 con: "none"	
					})
				}else{
					storeUserPrizeAddress({
						"lottery_id":this.lotteryId,
						"addr_id": this.areaId,
						"addr_remark":this.content
					}).then(res =>{
						
					})
				}
				this.areaId = null
				this.areaName = null
			}
		}
	}
</script>

<style lang="scss">
	.good-item {
	  display: flex;
	  border-bottom: 2px solid #f1f1f1;
	
	  .good-item-left {
	    image {
	      height: 200rpx;
	      width: 200rpx;
	      display: block;
	    }
	
	    padding: 20rpx;
	  }
	
	  .good-item-right {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    padding: 20rpx;
	
	    .good-item-name {
	      font-size: 14px;
	
	    }
	
	    .good-item-info {
	      .good-price {
	        font-size: 16px;
	        color: #c00000;
	      }
	    }
	  }
	}
</style>